<template>
  <div>
    <el-form
      :inline="!showExpandForm"
      :model="searchForm"
      ref="searchForm"
      class="search-from"
      label-width="120px">
      <el-row
        v-if="!showExpandForm"
        style="text-align: right">
        <el-form-item
          v-if="baseColumn"
          :label="baseColumn.label + '：'" :prop="baseColumn.searchName">
          <input-field v-model="searchForm[baseColumn.searchName]" :column="column"></input-field>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="searchAction">
            查询
          </el-button>
          <el-button size="small" @click="resetAction">重置</el-button>
          <el-button
            type="text"
            @click="expandAction">
            展开
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-row>
      <el-row v-else>
        <el-row type="flex" style="flex-wrap: wrap;">
          <el-col
            :span="8"
            v-for="(column, column_index) in searchColumn"
            :key="column_index">
            <el-form-item
              class="search-form-item"
              :label="column.label + '：'" :prop="column.searchName">
              <input-field v-if="column.searchType == 'input'" v-model="searchForm[column.searchName]" :column="column"></input-field>
              <select-field v-if="column.searchType == 'select'" v-model="searchForm[column.searchName]" :column="column"></select-field>
              <remote-select-field v-if="column.searchType == 'remoteSelect'" v-model="searchForm[column.searchName]" :column="column"></remote-select-field>
              <datetime-field v-if="column.searchType == 'dateTime'" v-model="searchForm[column.searchName]" :column="column"></datetime-field>
              <date-field v-if="column.searchType == 'date'" v-model="searchForm[column.searchName]" :column="column"></date-field>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="searchAction">
              查询
            </el-button>
            <el-button size="small" @click="resetAction">重置</el-button>
            <el-button
              type="text"
              @click="shrinkAction">
              收起
              <i class="el-icon-arrow-up el-icon--right"></i>
            </el-button>
          </el-form-item>
        </el-row>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import InputField from '@/components/TableList/search/item/InputField'
import SelectField from '@/components/TableList/search/item/SelectField'
import RemoteSelectField from '@/components/TableList/search/item/RemoteSelectField'
import DatetimeField from '@/components/TableList/search/item/DatetimeField'
import DateField from '@/components/TableList/search/item/DateField'
import _ from 'lodash'
export default {
  name: 'searchForm',
  props: {
    column: Array,
    showExpandFormFlag:{
      type: Boolean,
      default: false,
    }
  },
  components:{
    InputField,
    SelectField,
    RemoteSelectField,
    DatetimeField,
    DateField
  },
  data() {
    return {
      searchForm: {},
      showExpandForm: this.showExpandFormFlag,
      baseColumn: null,
      searchColumn: [],
    };
  },
  watch: {
    column: {
      handler(val) {
        this.handlerColumn(val);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    expandAction() {
      this.$set(this, 'showExpandForm', true);
      this.$refs['searchForm'].resetFields();
    },
    shrinkAction() {
      this.$set(this, 'showExpandForm', false);
      this.$refs['searchForm'].resetFields();
    },
    handlerColumn(column) {
      // 过滤不用展示的字段
      let info = [];
      let fields = _.cloneDeep(column)
      fields.forEach(item => {
        if (typeof item.searchType !== 'undefined') {
          info.push(item);
        }
      });
      this.$set(this, 'searchColumn', info);
      this.setBaseColumn(column);
    },
    setBaseColumn(data) {
      let info = data[0];
      for (var item in data) {
        if (data[item].baseSeachColumn) {
          info = data[item];
          break;
        }
      }
      this.$set(this, 'baseColumn', info);
    },
    searchAction() {
      let params = JSON.parse(JSON.stringify(this.searchForm))
      for( var key in params ){
        if( Array.isArray(params[key]) ){
          if( params[key].includes(null) ){
            delete params[key]
          }
        } else {
          if( params[key] === null || params[key] === '' ){
            delete params[key]
          }
        }
      }
      this.$emit('searchAction', params)
    },
    resetAction(){
      this.$refs['searchForm'].resetFields();
      this.$nextTick(()=>{
        this.searchAction()
      })
    }
  },
};
</script>
<style lang="scss" scoped>
  .search-from {
    .search-form-item {
      width: 100%;
      margin-bottom: 10px;
      .value-info {
        width: 100%;
      }
    }
  }
</style>
